<template>
	<view class="device-manage">
		<view class="section">
			<view class="device-title">照明&电控场景</view>
			<view class="card-box">
				<view class="card" v-for="(item,index) in roomElectricEquipmentArr" :key="index">
					<view class="card-item">
						<view>设备名称：</view>
						<view>{{item.equipmentName}}</view>
					</view>
					<view class="card-item">
						<view>设备 ID：</view>
						<view>{{item.equipmentId}}</view>
					</view>
					<view class="card-item" v-if="item.category ===0">
						<view>延时关闭时间（秒）：</view>
						<view>{{item.delay}}</view>
					</view>
					<view class="btn-box">
						<view class="edit-btn" @click="openPop('edit',item)">编辑</view>
						<view class="delete-btn" @click="deleteEvent(item)">删除</view>
					</view>
				</view>
				<view v-if="roomElectricEquipmentArr.length === 0" class="no-more">请添加照明&电控场景设备</view>
			</view>
		</view>
		<view class="section">
			<view class="device-title">播报场景</view>
			<view class="card-box">
				<view class="card" v-for="(item,index) in roomBoseEquipmentArr" :key="index">
					<view class="card-item">
						<view>设备名称：</view>
						<view>{{item.equipmentName}}</view>
					</view>
					<view class="card-item">
						<view>设备 ID：</view>
						<view>{{item.equipmentId}}</view>
					</view>
					<view class="btn-box">
						<view class="edit-btn" @click="openPop('edit',item)">编辑</view>
						<view class="delete-btn" @click="deleteEvent(item)">删除</view>
					</view>
				</view>
				<view v-if="roomBoseEquipmentArr.length === 0" class="no-more">请添加播报场景设备</view>
			</view>
		</view>
		<view class="section">
			<view class="device-title">门禁场景</view>
			<view class="card-box">
				<view class="card" v-for="(item,index) in roomGuardEquipmentArr" :key="index">
					<view class="card-item">
						<view>设备名称：</view>
						<view>{{item.equipmentName}}</view>
					</view>
					<view class="card-item">
						<view>设备 ID：</view>
						<view>{{item.equipmentId}}</view>
					</view>
					<view class="btn-box">
						<view class="edit-btn" @click="openPop('edit',item)">编辑</view>
						<view class="delete-btn" @click="deleteEvent(item)">删除</view>
					</view>
				</view>
				<view v-if="roomGuardEquipmentArr.length === 0" class="no-more">请添加门禁场景设备</view>
			</view>
		</view>

		<view class="footer-box">
			<text class="add-btn" @click="openPop('add')">添加设备</text>
		</view>

		<uni-popup ref="popup" type="bottom" :safe-area='false'>
			<view class="pop-box">
				<view class="pop-title">添加设备</view>
				<view class="pop-item">
					<view>使用场景：</view>
					<uni-data-select v-model="category" :clear="false" :localdata="categoryArr"
						@change="changeCategory"></uni-data-select>
				</view>
				<view class="pop-item">
					<view>设备类型：</view>
					<uni-data-select v-model="equipmentType" :clear="false" :localdata="equipmentTypeArr"
						@change="changeEquipmentType"></uni-data-select>
				</view>
				<view class="pop-item">
					<view>设备名称：</view>
					<uni-easyinput class="pop-input" :maxlength="32" primaryColor="#ffd589" trim="all"
						v-model="equipmentName" placeholder="请输入设备名称"></uni-easyinput>
				</view>
				<view class="pop-item">
					<view style="margin-right: 28rpx;">设备ID：</view>
					<uni-easyinput class="pop-input" :maxlength="32" primaryColor="#ffd589" trim="all"
						v-model="equipmentId" placeholder="请输入设备ID"></uni-easyinput>
				</view>
				<view class="pop-item" v-if="this.category === 0">
					<view style="margin-right: 28rpx;">延时关闭时间（秒）：</view>
					<uni-easyinput class="pop-input" :maxlength="32" primaryColor="#ffd589" trim="all" v-model="delay"
						placeholder="请输入延时时间"></uni-easyinput>
				</view>
				<view class="pop-btn-box">
					<view class="cancel-btn" @click="closePop">取消</view>
					<view class="submit-btn" @click="submitEvent">确认</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				productId: '',
				roomElectricEquipmentArr: [],
				roomBoseEquipmentArr: [],
				roomGuardEquipmentArr: [],
				category: 0,
				categoryArr: [{
						value: 0,
						text: "照明"
					},
					{
						value: 1,
						text: "电控"
					},
					{
						value: 2,
						text: "音响"
					},
					{
						value: 3,
						text: "门禁"
					},
				],
				equipmentType: 'TUYA_DLQ',
				equipmentTypeArr: [{
						value: 'TUYA_DLQ',
						text: "涂鸦继电器",
						manufacturer: "TUYA"
					},
					{
						value: 'TTS_GW',
						text: "通通锁网关",
						manufacturer: "TTS"
					},
					{
						value: 'SW_AUDIO',
						text: "云喇叭",
						manufacturer: "SW"
					}
				],
				equipmentName: null,
				equipmentId: null,
				manufacturer: "TUYA",
				delay: null, // 延时关闭时间
				type:'',
				id:''
			};
		},
		methods: {
			// 选择场景类型
			changeCategory(val) {
				this.category = val;
			},

			// 选择设备类型
			changeEquipmentType(val) {
				this.equipmentTypeArr.filter(item => {
					if (item.value === val) {
						this.equipmentType = item.value;
						this.manufacturer = item.manufacturer;
					}
				});

			},
			// 打开弹窗
			openPop(type, item) {
				this.type = type
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				if (type === 'edit') {
					this.category = item.category;
					this.equipmentType = item.equipmentType;
					this.equipmentName = item.equipmentName;
					this.equipmentId = item.equipmentId;
					this.manufacturer = item.manufacturer;
					this.delay = item.delay;
					this.id = item.id
				}
				this.$refs.popup.open('center')
			},
			closePop() {
				this.category = 0;
				this.equipmentType = 'TUYA_DLQ';
				this.equipmentName = null;
				this.equipmentId = null;
				this.manufacturer = "TUYA";
				this.delay = null;
				this.$refs.popup.close()
			},
			// 添加设备事件处理
			submitEvent() {
				if (this.category === -1) {
					uni.showToast({
						title: '请选择场景类型',
						duration: 2000,
						icon: 'none'
					})
					return
				} else if (!this.equipmentType) {
					uni.showToast({
						title: '请选择设备类型',
						duration: 2000,
						icon: 'none'
					})
					return
				} else if (!this.equipmentName) {
					uni.showToast({
						title: '请输入设备名称',
						duration: 2000,
						icon: 'none'
					})
					return
				} else if (!this.equipmentId) {
					uni.showToast({
						title: '请输入设备ID',
						duration: 2000,
						icon: 'none'
					})
					return
				}
				const data = {
					productId: this.productId,
					category: this.category,
					equipmentType: this.equipmentType,
					equipmentName: this.equipmentName,
					equipmentId: this.equipmentId,
					equipmentNo: this.equipmentId,
					delay: this.delay,
					manufacturer: this.manufacturer
				}
				//保存设备
				let method = ''
				if(this.type === 'edit'){
					method = 'put'
					data.id = this.id
				}else{
					method = 'post'
				}
				this.$request({
					method: method,
					url: `/applet/store/productEquipment`,
					data,
					loading: true,
					isEncrypt: false
				}).then(res => {
					this.requestEvent();
					this.closePop()
				})
			},
			// 删除设备事件处理
			deleteEvent(item) {
				uni.showModal({
					title: '提示',
					content: '是否确认删除该设备信息？',
					cancelText: '取消',
					cancelColor: '#666',
					confirmText: '确认',
					confirmColor: '##ff9600',
					success: res => {
						if (res.confirm) {
							this.$request({
								method: 'delete',
								url: `/applet/store/productEquipment/${item.id}`,
								loading: true,
								isEncrypt: false
							}).then(res => {
								this.requestEvent();
							}).catch(err => {
								console.log('删除设备异常：', err)
							})
						}
					}
				})
			},
			// 请求设备事件处理
			requestEvent() {
				this.getLightingEquipmentData();
				this.getBoseEquipmentData();
				this.getGuardEquipmentData();
			},
			//获取包间的电控照明设备
			getLightingEquipmentData() {
				const data = {
					pageNum: 1,
					pageSize: 1000,
					productId: this.productId,
					category: 0
				}
				this.$request({
					method: 'post',
					url: `/applet/store/productEquipment/list`,
					data,
					loading: false,
					isEncrypt: false
				}).then(res => {
					this.roomElectricEquipmentArr = res.rows;
					this.getElectricEquipmentData();
					this.isLoad = true
				})

			},
			//获取包间的电控设备
			getElectricEquipmentData() {
				const data = {
					pageNum: 1,
					pageSize: 1000,
					productId: this.productId,
					category: 1
				}
				this.$request({
					method: 'post',
					url: `/applet/store/productEquipment/list`,
					data,
					loading: false,
					isEncrypt: false
				}).then(res => {
					this.roomElectricEquipmentArr = [...this.roomElectricEquipmentArr, ...res.rows];
					this.isLoad = true
				})
			},
			//获取包间的音响设备
			getBoseEquipmentData() {
				const data = {
					pageNum: 1,
					pageSize: 1000,
					productId: this.productId,
					category: 2
				}
				this.$request({
					method: 'post',
					url: `/applet/store/productEquipment/list`,
					data,
					loading: true,
					isEncrypt: false
				}).then(res => {
					this.roomBoseEquipmentArr = res.rows;
					this.isLoad = true
				})
			},
			//获取包间的门禁设备
			getGuardEquipmentData() {
				const data = {
					pageNum: 1,
					pageSize: 1000,
					productId: this.productId,
					category: 3
				}
				this.$request({
					method: 'post',
					url: `/applet/store/productEquipment/list`,
					data,
					loading: true,
					isEncrypt: false
				}).then(res => {
					this.roomGuardEquipmentArr = res.rows;
					this.isLoad = true
				})
			},
		},
		onLoad(options) {
			this.productId = options.productId;
			this.requestEvent()
		}
	}
</script>

<style lang="scss" scoped>
	.device-manage {
		padding-bottom: 112rpx;

		.section {
			margin-bottom: 20rpx;
		}

		.device-title {
			position: relative;
			background: #FFF;
			padding: 30rpx;
		}

		.device-title::before {
			content: '';
			width: 8rpx;
			height: 36rpx;
			position: absolute;
			left: 10rpx;
			top: 34rpx;
			background: #ff9600;
		}

		.card-box {
			padding: 30rpx;
		}

		.card {
			background: #FFF;
			border-radius: 10rpx;
			padding: 20rpx;
			box-shadow: 0 2px 6px #CCC;
			margin-bottom: 20rpx;
		}

		.card-item {
			border-bottom: 1px solid #EEE;
			padding: 20rpx;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.btn-box {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			font-size: 28rpx;
			margin-top: 20rpx;

			.edit-btn {
				padding: 8rpx 46rpx;
				font-size: 24rpx;
				border-radius: 10rpx;
				color: #FFF;
				background: #169bd5;
				margin-left: 20rpx;
			}

			.delete-btn {
				padding: 8rpx 46rpx;
				font-size: 24rpx;
				border-radius: 10rpx;
				color: #FFF;
				background: #ff9600;
				margin-left: 20rpx;
			}
		}

		.footer-box {
			width: 100%;
			position: fixed;
			bottom: 0;
			padding: 30rpx 0;
			text-align: center;
			background: #FFF;

			.add-btn {
				display: inline-block;
				color: #FFF;
				background: #ff9600;
				font-size: 24rpx;
				border-radius: 10rpx;
				padding: 10rpx 60rpx;
			}
		}

		.pop-box {
			background: #FFF;
			border-radius: 20rpx;
			padding: 30rpx;
			width: 600rpx;

			.pop-title {
				font-size: 32rpx;
				font-weight: 600;
				text-align: center;
				margin-bottom: 30rpx;
			}

			.pop-item {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				margin-bottom: 30rpx;
			}

			.pop-unit {
				margin-left: 10rpx;
			}

			.pop-btn-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 60rpx;

				.cancel-btn {
					padding: 8rpx 46rpx;
					font-size: 24rpx;
					border-radius: 10rpx;
					border: 1px solid #CCC;
				}

				.submit-btn {
					padding: 8rpx 46rpx;
					font-size: 24rpx;
					border-radius: 10rpx;
					color: #FFF;
					background: #ff9600;
				}
			}
		}

		.no-more {
			text-align: center;
			padding: 32rpx 0;
			color: #CCC;
			font-size: 28rpx;
		}

	}
</style>